<template>
  <div id="buy_nav" class="buy_nav">
    <van-nav-bar :title="title" @click-left="onClickLeft" class="font-36 border-none">
      <template #left>
        <slot name="left">
          <van-icon name="arrow-left" />
        </slot>
      </template>
      <template #title>
        <slot name="title"></slot>
      </template>
      <template #right>
        <slot name="right"></slot>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import { NavBar, Icon } from 'vant';
export default {
  name: "OrderNav",
  props: {
    title: {

    },
    state: {

    },
    // 是否要路由返回
    back: {
      default: true,
    }
  },
  data() {
    return {

    }
  },
  methods: {
    // 返回
    onClickLeft() {
      if (this.back) {
        this.$router.back();
      } else {
        this.$emit('back')
      }
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
  }
}
</script>

<style lang="scss" scoped>
.buy_nav {
  // ::v-deep .van-nav-bar {
  //   @include themify() {
  //     background: themed("main_background") !important;
  //   }
  // }
  ::v-deep .van-nav-bar {
    &:after {
      border: none;
    }
  }

  ::v-deep .van-icon {
    font-size: 40px;

    @include themify() {
      color: themed("c2c_color");
    }
  }

  ::v-deep .van-nav-bar__title {
    font-size: 37px;
  }
}
</style>
